<template>
    <div class="chart" ref="leftTopChart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getLeftTopChartData } from '@/api/data-screen/LeftChart';

onMounted(() => {
    initLeftTopChart(); // 左上柱状图折线图
})

//学院名：
const colleges = [
    "国际学院", "大数据统计学院", "经济学院", "大数据应用与经济学院",
    "文学院", "工商管理学院", "会计学院", "管理科学与工程学院",
    "信息学院", "西密歇根学院", "法学院", "现代康旅学院",
    "外语学院", "公共管理学院", "艺术学院", "马克思主义学院",
    "体育学院", "数学与统计学院"
];

//左上柱状图折线图
const leftTopChart = ref<HTMLElement | null>(null);
// 初始化
let leftTopChartInstance: echarts.ECharts | null = null;
const initLeftTopChart = () => {
    if (leftTopChart.value) {
        leftTopChartInstance = echarts.init(leftTopChart.value);
        updateleftTopChart();
    }
};

// 从后端获取数据
const fetchData = async (): Promise<{ preReserveCount: number[]; clubCount: number[] }> => {
    try {
        const response = await getLeftTopChartData();
        const data = await response.data;

        const preReserveCount: number[] = [];
        const clubCount: number[] = [];

        colleges.forEach(college => {
            const item = data.find(item => item.college === college);
            preReserveCount.push(item ? item.preReserveCount : 0);
            clubCount.push(item ? item.clubCount : 0);
        });

        return { preReserveCount, clubCount };
    } catch (error) {
        console.error("获取左上图数据失败:", error);
        return { preReserveCount: [], clubCount: [] };
    }
};
// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
    return rem * rootFontSize;
}

// 更新数据
const updateleftTopChart = async () => {
    try {

        // 从后端获取数据
        const { preReserveCount, clubCount } = await fetchData();

        //const barColors = generateColors(25); // 为25个学院生成不同颜色

        const option = {
            color: '#00FFFF',
            tooltip: {
                trigger: 'axis',
                //预览线颜色
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            textStyle: {
                fontSize: remToPx(0.75), // 提示框文字大小为 0.8rem
                lineHeight: remToPx(1.1) // 提示框行高为 1.2rem
            },
            padding: [remToPx(0.4), remToPx(0.9)], // 提示框内边距，单位为 rem
            borderRadius: remToPx(0.4), // 圆角半径为 0.4rem
            borderWidth: remToPx(0.1), // 边框宽度为 0.1rem
            borderColor: '#ccc', // 边框颜色
            grid: {
                top: '12%',
                left: '2%',
                right: '3%',
                bottom: '11%',
                containLabel: true//是否包含坐标轴标签
            },
            legend: {
                data: ['预储', '军事兴趣社团'],
                textStyle: {
                    color: '#ccc',
                    fontSize: remToPx(0.9) // 图例文字大小为 0.8rem
                },
                itemWidth: remToPx(1.2), // 图例图标宽度为 1rem
                itemHeight: remToPx(0.7) // 图例图标高度为 0.6rem
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            width: remToPx(0.1) // X轴线宽为 0.1rem
                        }
                    },
                    data: colleges.map(name => {
                        if (name.length <= 5) {
                            // 长度小于等于 5，每个字符单独成一行
                            return name.split('').join('\n');
                        } else {
                            // 长度大于 5，每两个字换一次行
                            let result = '';
                            for (let i = 0; i < name.length; i += 2) {
                                result += name.slice(i, i + 2) + '\n'; // 每两个字加一个换行符
                            }
                            return result.trim(); // 去掉最后的换行符
                        }
                    }),
                    axisLabel: {
                        //color: '#333', // 设置标签颜色
                        fontSize: '0.8rem', // 设置字体大小
                        interval: 0, // 强制显示所有标签
                        align: 'center',
                        verticalAlign: 'top', // 顶部对齐
                        //lineHeight: remToPx(1.2) // 行高为 1.2rem
                        // formatter: function (value) {
                        //     return value; // 直接返回处理后的名称
                        // }
                    }
                    // name: '学院', // 横坐标单位名称
                    // nameLocation: 'end', // 名称显示在右后方
                    // nameTextStyle: {
                    //     color: '#ccc',
                    //     fontSize: 14,
                    //     verticalAlign: 'top', // 垂直对齐方式，避免与坐标轴重合
                    // },
                    // axisPointer: {
                    //     type: 'shadow'
                    // }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            width: remToPx(0.1) // Y轴线宽为 0.1rem
                        }
                    },
                    name: '预储/人',
                    nameTextStyle: {
                        fontSize: remToPx(0.8), // 名称字体大小为 0.8rem
                        padding: [remToPx(0.2), 0, 0, 0] // 名称与轴的距离为 0.2rem
                    },
                    min: 0,
                    axisLabel: {
                        fontSize: remToPx(0.8), // 标签字体大小为 0.8rem
                        formatter: '{value}'
                    }
                    //max: 250,
                    //interval: 50,
                    // axisLabel: {
                    //     formatter: '{value}'
                    // }
                },
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            width: remToPx(0.1) // Y轴线宽为 0.1rem
                        }
                    },
                    name: '军事兴趣社团/人',
                    nameTextStyle: {
                        fontSize: remToPx(0.8), // 名称字体大小为 0.8rem
                        padding: [0, remToPx(1.2), 0, 0] // 名称右移 1.2rem
                    },
                    min: 0,
                    //max: 25,
                    //interval: 5,
                    axisLabel: {
                        fontSize: remToPx(0.8), // 标签字体大小为 0.8rem
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '预储',
                    type: 'bar',
                    //柱子颜色配置
                    itemStyle: {
                        //七彩随机色系
                        //color: (params: any) => barColors[params.dataIndex],
                        //渐变色系粉
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0.5,
                            x3: 0,
                            y3: 1,
                            colorStops: [{
                                offset: 0, color: '#FFC0CB' // 渐变起始颜色
                            }, {
                                offset: 0.5, color: '#DB7093' // 渐变结束颜色
                            }, {
                                offset: 1, color: '#C71585' // 渐变结束颜色
                            }]
                        },
                        borderRadius: [3, 3, 0, 0]
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return (value as number) + '';
                        }
                    },
                    data: preReserveCount
                },
                {
                    name: '军事兴趣社团',
                    type: 'line',
                    lineStyle: {
                        width: remToPx(0.15), // 折线宽度为 0.2rem
                        color: '#87CEFA'
                    },
                    //折线颜色
                    // lineStyle: {
                    //     width: 3,
                    //     color: '#87CEFA'
                    // },
                    itemStyle: {
                        color: '#FF7F50'
                    },
                    symbolSize: remToPx(0.4), // 折线点大小为 0.6rem
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return (value as number) + '';
                        }
                    },
                    data: clubCount
                }
            ]
        };

        leftTopChartInstance.setOption(option);
    } catch (error) {
        console.error("获取左上柱形图折线图数据失败:", error);
    }
};
</script>

<style scoped>
.chart {
    height: 100%;
    width: 100%;
}
</style>

<!-- 单轴坐标模式 -->
<!-- <template>
    <div class="chart" ref="leftTopChart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getLeftTopChartData } from '@/api/data-screen/LeftTopChart';

onMounted(() => {
    initLeftTopChart(); // 左上柱状图折线图
})

//学院名：
const colleges = [
    "国际学院", "大数据统计学院", "经济学院", "大数据应用与经济学院",
    "文学院", "工商管理学院", "会计学院", "管理科学与工程学院",
    "信息学院", "西密歇根学院", "法学院", "现代康旅学院",
    "外语学院", "公共管理学院", "艺术学院", "马克思主义学院",
    "体育学院", "数学与统计学院"
];

//左上柱状图折线图
const leftTopChart = ref<HTMLElement | null>(null);
// 初始化
let leftTopChartInstance: echarts.ECharts | null = null;
const initLeftTopChart = () => {
    if (leftTopChart.value) {
        leftTopChartInstance = echarts.init(leftTopChart.value);
        updateleftTopChart();
    }
};

// 从后端获取数据
const fetchData = async (): Promise<{ preReserveCount: number[]; clubCount: number[] }> => {
    try {
        const response = await getLeftTopChartData();
        const data = await response.data;

        const preReserveCount: number[] = [];
        const clubCount: number[] = [];

        colleges.forEach(college => {
            const item = data.find(item => item.college === college);
            preReserveCount.push(item ? item.preReserveCount : 0);
            clubCount.push(item ? item.clubCount : 0);
        });

        return { preReserveCount, clubCount };
    } catch (error) {
        console.error("获取左上图数据失败:", error);
        return { preReserveCount: [], clubCount: [] };
    }
};

// 更新数据
const updateleftTopChart = async () => {
    try {
        // 从后端获取数据
        const { preReserveCount, clubCount } = await fetchData();

        const option = {
            color: '#00FFFF',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '3%',
                bottom: '9%',
                containLabel: true
            },
            legend: {
                data: ['预储', '军事兴趣社团'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                        }
                    },
                    data: colleges.map(name => {
                        if (name.length <= 5) {
                            return name.split('').join('\n');
                        } else {
                            let result = '';
                            for (let i = 0; i < name.length; i += 2) {
                                result += name.slice(i, i + 2) + '\n';
                            }
                            return result.trim();
                        }
                    }),
                    axisLabel: {
                        fontSize: 12,
                        interval: 0,
                        align: 'center',
                        verticalAlign: 'top'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    name: '人数',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '预储',
                    type: 'bar',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0.5,
                            x3: 0,
                            y3: 1,
                            colorStops: [{
                                offset: 0, color: '#FFC0CB'
                            }, {
                                offset: 0.5, color: '#DB7093'
                            }, {
                                offset: 1, color: '#C71585'
                            }]
                        },
                        borderRadius: [3, 3, 0, 0]
                    },
                    tooltip: {
                        valueFormatter: (value: number) => `${value}人`
                    },
                    data: preReserveCount
                },
                {
                    name: '军事兴趣社团',
                    type: 'line',
                    tooltip: {
                        valueFormatter: (value: number) => `${value}人`
                    },
                    lineStyle: {
                        width: 2,
                        color: '#00FFFF'
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: '#00FFFF'
                    },
                    data: clubCount
                }
            ]
        };

        leftTopChartInstance?.setOption(option);
    } catch (error) {
        console.error("获取左上柱形图折线图数据失败:", error);
    }
};
</script>

<style scoped>
.chart {
    height: 100%;
    width: 100%;
}
</style> -->